@use 'sass:map';
@use 'sass:math';
@use 'sass:list';

@use './variables.scss' as *;

@mixin inherit-basis {
  font-family: inherit;
  font-size: inherit;
  font-variant-numeric: inherit;
  line-height: inherit;
}

@mixin basis($inherit: true) {
  font-family: get-css-var('font-family-base');
  font-size: get-css-var('font-size-base');
  font-variant-numeric: tabular-nums;
  line-height: get-css-var('line-height-base');
  color: get-css-var('content-color-base');

  &,
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  @if $inherit {
    &--inherit {
      @include inherit-basis;
    }
  }
}

@mixin fixed {
  position: fixed;
  inset: 0;
}

@mixin inner-fixed {
  position: absolute;
  inset: 0;
}

@mixin clear-both {
  &::before,
  &::after {
    display: table;
    content: '';
  }
}

@mixin query-media($point) {
  @if map.has-key($break-point-map, $point) {
    @media screen and #{inspect(map.get($break-point-map, $point))} {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin rtl {
  $self: #{&};

  @at-root {
    html.rtl,
    html[dir='rtl'] {
      #{$self} {
        @content;
      }
    }
  }
}

@mixin around-border($border-color, $border-radius, $duration: 2000ms) {
  position: relative;

  &::before {
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    content: '';
    border: get-css-var('border-shape') $border-color;
    border-radius: $border-radius;
    transition: get-css-var('transition-border'), get-css-var('transition-opacity');
    animation: vxp-border-clip $duration infinite linear;
  }
}

@mixin round-border($border-color, $duration: 2000ms) {
  position: relative;

  &::before {
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    clip-path: inset(0 0 50% 50%);
    pointer-events: none;
    content: '';
    border: get-css-var('border-shape') $border-color;
    border-radius: 50%;
    transition: get-css-var('transition-border'), get-css-var('transition-opacity');
    transform-origin: 50% 50%;
    animation: vxp-border-round $duration infinite linear;
  }
}

@mixin h-moving-border($border-color, $duration: 2000ms) {
  position: relative;
  will-change: inset;

  &::before {
    position: absolute;
    inset: -4px 25% auto;
    width: auto;
    height: 0;
    content: '';
    border-top: get-css-var('border-shape') $border-color;
    transition: get-css-var('transition-border'), get-css-var('transition-opacity');
    animation: vxp-h-moving-border $duration infinite;
  }

  &::after {
    position: absolute;
    inset: auto 25% -4px;
    width: auto;
    height: 0;
    content: '';
    border-top: get-css-var('border-shape') $border-color;
    transition: get-css-var('transition-border'), get-css-var('transition-opacity');
    animation: vxp-h-moving-border $duration #{math.div(-$duration, 2)} infinite;
  }
}

@mixin v-moving-border($border-color, $duration: 2000ms) {
  position: relative;
  will-change: inset;

  &::before {
    position: absolute;
    inset: 25% auto 25% -4px;
    width: 0;
    height: auto;
    content: '';
    border-inline-start: get-css-var('border-shape') $border-color;
    transition: get-css-var('transition-border'), get-css-var('transition-opacity');
    animation: vxp-v-moving-border $duration infinite;
  }

  &::after {
    position: absolute;
    inset: 25% -4px 25% auto;
    width: 0;
    height: auto;
    content: '';
    border-inline-start: get-css-var('border-shape') $border-color;
    transition: get-css-var('transition-border'), get-css-var('transition-opacity');
    animation: vxp-v-moving-border $duration #{math.div(-$duration, 2)} infinite;
  }
}

@mixin logical-radius($values) {
  @if list.nth($values, 1) {
    border-start-start-radius: list.nth($values, 1);
  }

  @if list.nth($values, 2) {
    border-start-end-radius: list.nth($values, 2);
  }

  @if list.nth($values, 3) {
    border-end-end-radius: list.nth($values, 3);
  }

  @if list.nth($values, 4) {
    border-end-start-radius: list.nth($values, 4);
  }
}
